<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>支付完成</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../mui/hello-mui/css/mui.min.css">
    <!-- 扩展图标库 -->
    <link rel="stylesheet" href="../mui/hello-mui/css/icons-extra.css" type="text/css">
    <!-- de-css -->
    <link rel="stylesheet" href="../dece/css/de-css.css">

    <script src="../dece/js/app.js" type="text/javascript"></script>
    <script src="../dece/js/vue.js" type="text/javascript"></script>
    <script src="../dece/js/axios.min.js" type="text/javascript"></script>
    <!-- 引入饿了么样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入饿了么组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        .pay_success {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
        }
        .pay_success .pay_top {
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: center;
            background: white;
            width: 100%;
        }
        .pay_success .pay_top > img {
            width: 120px;
            height: 120px;
            margin: 40px 0 20px 0;
        }
        .pay_success > .pay_unit {
            color: #999;
            margin: 10px;
            font-size: 16px;
        }
        .pay_success > label {
            font-size: 28px;
            margin: 5px;
        }
        .pay_success > span {
            font-size: 14px;
            color: #999;
            margin: 0px;
            margin: 5px 0 20px;
        }
        .pay_success > button {
            width: 80%;
            color: #fff;
            font-size: 16px;
            border: 1px solid #67C23A;
            background-color: #67C23A;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-transparent">
            <a href="javascript:history.go(-1);" class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">支付完成</h1>
        </header>
        <div class="mui-content">
            <div class="pay_success">
                <div class="pay_top">
                    <img src="../mui/img/success.png">
                </div>
                <div class="pay_unit">支付金额(元)</div>
                <label>{{order.total_amount}}</label>
                <span>订单号：{{order.out_trade_no}}</span>
                <span>流水号：{{order.trade_no}}</span>
                <button @click="de_url">完成</button>
            </div>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#app",
            data: {
                api_host: de.api_host,
                order: {
                    trade_no: '',
                    out_trade_no: '',
                    total_amount: 0,
                },
            },
            created: function (){
                this.get_data();
            },
            mounted: function (){
            },
            methods: {
                // 获取数据
                get_data: function (){
                    this.order.trade_no = de.get('trade_no') ? de.get('trade_no') : '' ;
                    this.order.out_trade_no = de.get('out_trade_no') ? de.get('out_trade_no') : '' ;
                    this.order.total_amount = de.get('total_amount') ? de.get('total_amount') : 0 ;
                },
                // 获取收货地址信息
                de_url: function (){
                    de.href('../index.html');
                },
            },
        });
    </script>
</body>

</html>